<template>
    <van-notice-bar left-icon="volume-o" text="未注册用户登录时将自动注册！" />
    <div class="login">
        <div class="login_img">
            <img src="/public/meeting.png" alt="">
        </div>

        <div class="login_form">
            <van-form>
                <van-cell-group inset>
                    <van-field v-model="userphone" type="digit" name="手机号" label="手机号" placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]" />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" @click="login">
                        登录
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '@/http';
import { useUserStore } from '@/stores/counter.js';

let userStore = useUserStore();
let router = useRouter()
let userphone = ref('');
let password = ref('');

function login() {
    if (password.value != '') {
        if (userphone.value.length == 11) {
            http.post('/escort/login/', {
                phone: userphone.value,
                password: password.value
            }).then(res => {
                if (res.data.code == 200) {
                    console.log("请求成功", res.data)
                    alert(res.data.msg)
                    userStore.setAccount(userphone.value)
                    router.push('/homepage')
                } else {
                    alert(res.data.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        } else {
            alert('请输入正确的手机号')
        }
    } else {
        alert('账号或密码不能为空')
    }
}


</script>
<style scoped>
.login {
    width: 100%;
    height: 95vh;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.login_img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.login_img>img {
    width: 80%;
}

.login_form {
    position: relative;
    width: 90%;
    margin: 0 10%;
}

.change {
    position: absolute;
    right: 10%;
    top: 35%;
}
</style>
